<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 803过滤器相关作业 师改 -->
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>商品类型</th>
                <th>商品名</th>
                <th>单价</th>
                <th>折扣价</th>
                <th>美元价</th>
            </tr>
            <tr v-for="(item,index) in GoodList" :key="item.id" v-if="item.category==1">
                <td>{{item.id}}</td>
                <td>{{item.category==1?'电子产品':'生活用品'}}</td>
                <td>{{item.name}}</td>
                <td><s>{{item.price | fmtRMB}}</s></td>
                <td>{{item.price | discount8 | fmtRMB}}</td>
                <td>{{item.price | discount8 | getUSD | fmtUSD}}</td>
            </tr>
            <tr v-for="(item,index) in GoodList" :key="item.id" v-if="item.category==2">
                <td>{{item.id}}</td>
                <td>{{item.category==1?'电子产品':'生活用品'}}</td>
                <td>{{item.name}}</td>
                <td><s>{{item.price | fmtRMB}}</s></td>
                <td>{{item.price | discount5 | fmtRMB}}</td>
                <td>{{item.price | discount5 | getUSD | fmtUSD}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                GoodList: [{
                    id: '1001',
                    name: '三星手机',
                    price: 3800.0,
                    category: 1
                }, {
                    id: '1002',
                    name: '海飞丝洗发水',
                    price: 56.0,
                    category: 2
                }, {
                    id: '1003',
                    name: '飞科刮胡刀',
                    price: 900.0,
                    category: 1
                }, ],

            },
            filters: {
                discount8: function(value) {
                    return parseFloat(value * 0.8);
                },
                discount5: function(value) {
                    return parseFloat(value * 0.8);
                },
                getUSD: function(value) {
                    return value * 0.1482

                },
                fmtRMB: function(value) {
                    return value.toLocaleString('zh-Hans-CN', {
                        style: 'currency',
                        currency: 'CNY',
                    })
                },
                fmtUSD: function(value) {
                    return value.toLocaleString('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })
                },


            }

        })
    </script>
</body>

</html>